<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
		<style type="text/css">
			*{margin:0;padding: 0;}
			.boss{width: 805px;height: 320px;-webkit-box-shadow: 0 0 5px #000;}
			ul{width: 805px;height: 320px;overflow: hidden;}
			li{width: 20%;height: 320px;box-sizing:border-box;border-left:1px solid #888;
			display: block;float: left;position: relative;transition: all .5s;}
			img{width: 100%;height: 100%;display: block;}
			.shadow{position: absolute;bottom: 0;background: rgba(0,0,0,0.4);height:50px;width: 100%;text-align: center;line-height: 50px;color: white;}
		   ul:hover li{width:5%;}
		   ul li:hover{width:80%;}
		   
		</style>
	</head>
	<body>
		<div class="boss">
			<ul>
				<li>
					<img src="img/img1.jpg"/>
					<div class="shadow">kunfu panda</div>
				</li>
				<li><img src="img/img2.jpg"/><div class="shadow">toy story2</div></li>
				<li><img src="img/img3.jpg"/><div class="shadow">wall-e</div></li>
				<li><img src="img/img4.jpg"/><div class="shadow">up</div></li>
				<li><img src="img/img5.jpg"/><div class="shadow">cars-2</div></li>
			</ul>
		</div>
	</body>
</html>
